<template>
  <div class="part-usage-record">
    <el-table :data="page.list" style="width:100%">
      <el-table-column :label="$t('common.base.operator')" prop="record.executorName" width="120"></el-table-column>
      <el-table-column :label="$t('common.base.type')" prop="record.item" width="80"></el-table-column>
      <el-table-column :label="$t('common.base.quantity')" prop="record.variation" width="100"></el-table-column>
      <el-table-column :label="$t('common.form.type.taskNo')" prop="record.taskNo" width="150"></el-table-column>
      <el-table-column :label="$t('common.base.customer')" prop="record.customerName" width="200"></el-table-column>
      <el-table-column :label="$t('common.base.warehouse')" prop="repertory.name" width="120"></el-table-column>
      <el-table-column :label="$t('common.base.time')" prop="record.createTime" width="180">
        <template slot-scope="scope">
          {{ (scope.row.record? scope.row.record.createTime : '') | formatDate }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="page.total"
      :current-page="page.pageNum"
      @current-change="jump">
    </el-pagination>
  </div>
</template>

<script>
import { formatDate } from 'pub-bbx-utils';

export default {
  name: 'part-usage-record',
  inject: ['initData'],
  props: {
    page:{
      type: Object
    }
  },
  methods:{
    jump(currentPage){ //点击表格页数
      this.$emit('changePageNum', currentPage);    
    }
  },
  filters: {
    formatDate (val) {
      if (!val) return '';
      return formatDate(val);
    },
  },
}
</script>

<style lang="scss">
.part-usage-record{
  padding: 0 10px 10px 10px;
  table thead th{
    padding: 6px 0;
    background:#FAFAFA;
  }
  table td{
    padding: 6px 0;
  }
}
</style>

